<template>
  <div>
    <el-form-item label="列配置项">
      <draggable
        tag="ul"
        :list="localData.rows"
        :group="{ name: 'rows', pull: false, put: false }"
        ghost-class="ghost"
        handle=".drag-item"
      >
        <template #item="{ element, index }">
          <li>
            <el-icon class="el-icon drag-item" style="font-size: 16px; margin: 0 5px; cursor: move"
            ><Operation
            /></el-icon>
            <el-input-number
              style="margin-right: 5px"
              size="default"
              clearable
              v-model="element.span"
              placeholder="栅格宽度"
              controls-position="right"
            />
            <el-button
              @click="handleRemoveFields(index)"
              circle
              plain
              type="danger"
              size="small"
              icon="el-icon-minus"
              style="margin-left: 5px"
            />
          </li>
        </template>
      </draggable>
      <el-button link @click="handleAddFields()">添加列 </el-button>
    </el-form-item>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
export default {
  name: 'GridConfig',
  components: { Draggable },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localData: {}
    }
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = newVal
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal)
      },
      deep: true
    }
  },
  methods: {
    handleRemoveFields(index) {
      this.localData.rows.splice(index, 1)
    },
    handleAddFields() {
      this.localData.rows.push({
        span: 12,
        labelPosition: 'right',
        labelSuffix: '：',
        labelWidth: 120,
        gutter: 0,
        menuBtn: false,
        menuPosition: 'center',
        group: [],
        column: []
      })
    }
  }
}
</script>
